<script setup>
import { defineEmits,onMounted } from 'vue';
const props = defineProps({
    title:{
        default:'标题',
    },
    isModal:{   //是否显示
        default:true,
    }
})
const emit = defineEmits(['close']);
const closeModal = () => {  //关闭
    emit('close');
}
// onMounted(closeModal);
</script>

<template>
    <Transition name="modal">
        <div class="add-modal" v-if="isModal">
            <div class="add-modal-header">
                <p class="add-modal-name">{{ title }}</p>
                <span class="iconfont icon-cha" @click="closeModal"></span>
            </div>
            <div class="add-modal-main">
            <slot></slot>
        </div>
        </div>
    </Transition>
</template>

<style lang="less" scoped>
@import "../assets/fonts/icon/iconfont.css";
.modal{
    //入场动画
    &-enter{
        &-from{
            transform: translateX(100%);
        }
        &-active{
            transition:@tr;
        }
        &-to{
            transform: translateX(0); 
        }
    }
    //离场动画
    &-leave{
        &-from{
            transform: translateX(0);
        }
        &-active{
            transition:@tr;
        }
        &-to{
            transform: translateX(100%);
        }
    }
}
.add-modal{
    width: 360px;
    height: 100%;
    position: fixed;
    right: 0;
    top: 52px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.80);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(16px);
    
    .add-modal-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: @padding-20; 
        .add-modal-name{
            font-size: @font-size-16;
            color: @gray-1;
            font-weight: 600;
       }
       .icon-cha{
            cursor: pointer;
            color: @gray-2;
       }
    }
    .add-modal-main{
       height: 100%;
       overflow-y: auto;
       box-sizing: border-box;
        padding-bottom: 116px; 
        overflow-x: auto;
        margin: 2px;
    }

    .add-modal-main::-webkit-scrollbar {
        /* 滚动条整体样式 */
        width: 4px;
        /* 高宽分别对应横竖滚动条的尺寸 */
        height: 4px;
    }
    .add-modal-main::-webkit-scrollbar-thumb {
        /* 滚动条里面小方块 */
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.2);
    }
    .add-modal-main::-webkit-scrollbar-track {
        /* 滚动条里面轨道 */
        border-radius: 4px;
        background: rgba(0, 0, 0, 0);
    }
}
</style>
